<!-- 动态占位符 -->
<!-- <input class="uni-input" :placeholder="user_info.sex?user_info.sex:'手机号'"  type="number" @input="inputPhoneNumber" focus/> -->

<template>
	<view class='content'>
		<view class='father_view'>
			<view class="page-title">
			    <view class="page-title__wrapper">
			        <text class="page-title__text">{{title}}</text>
					
			    </view>
			</view>
			<view class='uni-form-item uni-column'>
				<!-- <text space="emsp" decode="true">{{' '}}请输入以下信息:</text> -->
				<text>请输入以下信息:</text>
			</view>
			
			<!-- <view class="title-bg"> &nbsp;---- 请输入以下信息:</view> -->
			<view class="uni-form-item uni-column">
			    <view class="uni-input-wrapper">
			        <input class="uni-input" maxlength="10" placeholder="姓名" />
			    </view>
			</view>
			
			<view class="uni-form-item uni-column">
			    <view class="uni-input-wrapper">
			        <input class="uni-input" type="number" placeholder="手机号" />
			    </view>
			</view>
			
			<view class="uni-form-item uni-column">
			    <view class="title"><text class="uni-form-item__title">输入为: {{inputValue}}</text></view>
			    <view class="uni-input-wrapper">
			        <input class="uni-input" @input="onKeyInput" type="idcard" placeholder="身份证号" /> </view>
			</view>
			
			<view class="uni-form-item uni-column">
			    <view class="title">
					<text class="uni-form-item__title">控制最大输入长度的 input</text>
				</view>
			    <view class="uni-input-wrapper">
			        <input class="uni-input" maxlength="20" placeholder="最大输入长度为20" />
			    </view>
			</view>
			
			<view class="uni-form-item uni-column">
			    <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
			    <view class="uni-input-wrapper">
			        <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
			        <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
			    </view>
			</view> 
			
		</view>
		
		<button @click='submit'>提交</button>
		
	</view>
</template>

<script>
	import * as util from 'util.js'
	export default {
		data() {
			return {
				title: '报名申请表',
				text1:'',
				inputValue: '',
				showClearIcon: false,
				inputClearValue: '',
			}
		},
		methods: {
			// 输入
			onKeyInput: function(event) {
				// let util = require('util.js');
			    this.inputValue = event.detail.value;
				console.log('~~~~~', util.checkIdCard(this.inputValue));
			},
			clearInput: function(event) {
			    this.inputClearValue = event.detail.value;
			    if (event.detail.value.length > 0) {
			        this.showClearIcon = true;
			    } else {
			        this.showClearIcon = false;
			    }
			},
			clearIcon: function() {
			    this.inputClearValue = '';
			    this.showClearIcon = false;
			},
			
			// 报名
			async submit () {
				// var myUrl = this.$baseUrl + '/api/index/ForecastRegistration/';
				var myUrl = '/api/index/ForecastRegistration/';
				console.log('~~~ myurl:', myUrl);
				const res = await this.$myRequest({
					method: 'POST',
					url: myUrl,
					data: {
						'name': 'bode1',
						'phone_number': 'phone_number'
					}
				})
				console.log('--- res.data: ', res.data);
				var result = res.data.result;
				var newUrl = myUrl + result.id.toString() + '/';
				
				console.log('--- newUrl: ', newUrl);
				// var new_data = this.add_hostname_before_keyname(res.data, 'image')
				// this.goods = new_data
			},
		}
	}
</script>


<style scoped>
    .nvue-page-root {
        background-color: #F8F8F8;
        padding-bottom: 20px;
    }

    .page-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 35rpx;
    }

    .page-title__wrapper {
        padding: 0px 20px;
        border-bottom-color: #D8D8D8;
        border-bottom-width: 1px;
    }

    .page-title__text {
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        color: #BEBEBE;
    }

    .title {
        padding: 5px 13px;
    }

    .uni-form-item__title {
        font-size: 16px;
        line-height: 24px;
    }

    .uni-input-wrapper {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        padding: 8px 13px;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: #FFFFFF;
    }

    .uni-input {
        height: 28px;
        line-height: 28px;
        font-size: 15px;
        padding: 0px;
        flex: 1;
        background-color: #FFFFFF;
    }

    .uni-icon {
        font-family: uniicons;
        font-size: 24px;
        font-weight: normal;
        font-style: normal;
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #999999;
    }

    .uni-eye-active {
        color: #007AFF;
    }
</style>

